<!--
 * @Description: 传承人用户中心页面
 * @Author: augn
 * @Date: 2022-10-20 23:24:55
 * @LastEditTime: 2022-10-24 15:13:14
 * @LastEditors: Gaq
-->
<script setup>
    import request from "@/utils/request";
    import router from "@/router";
    import { ElMessage } from "element-plus";
  
    const role = JSON.parse(localStorage.getItem("user")).role;
    const roleId = JSON.parse(localStorage.getItem("user")).roleId;
  
    let goods = ref({
      culId: role === "inheritor" ? roleId : null,
      manuId: role === "manufacturer" ? roleId : null,
      goodsId: role != "inheritor" && role != "manufacturer" ? -1 : null,
    });
    const post = ref({
      userId: JSON.parse(localStorage.getItem("user")).userId,
    });
    let userInfo = ref({});
    let goodsItem = ref([]);
    let postItem = ref([]);
  
    const activeIndex = ref("1");
    const activeIndex1 = ref("1");
    const isEmpty = ref(false);
    const isLoading = ref(false);
    const choose = ref(3);
    let noClick = ref(true);
  
    onBeforeMount(() => {
      getGoodsList();
      getUserInfo();
    });
  
    const loginOut = () => {
      localStorage.clear();
      router.push({
        path: "/",
      });
    };
  
    const change = (res) => {
      choose.value = res;
      if (res === 1) {
        getNewUserInfo();
      }
      if (res === 3) {
        getGoodsList();
        if (goodsItem.value.length != 0) {
          isEmpty.value = true;
        } else {
          isEmpty.value = false;
        }
      }
      if (res === 4) {
        getPostList();
        if (postItem.value.length != 0) {
          isEmpty.value = true;
        } else {
          isEmpty.value = false;
        }
      }
    };
  
    const handleSelect = (key) => {
      if (key === "1") {
        goods.value.keyword = "";
      } else if (key === "2") {
        goods.value.keyword = "文具";
      } else if (key === "3") {
        goods.value.keyword = "衣物";
      } else if (key === "4") {
        goods.value.keyword = "装饰品";
      } else if (key === "5") {
        goods.value.keyword = "纪念品";
      } else if (key === "6") {
        goods.value.keyword = "玩具";
      } else if (key === "7") {
        goods.value.keyword = "家纺";
      } else if (key === "8") {
        goods.value.keyword = "餐具";
      }
      getGoodsList();
    };
  
    const handleSelect1 = (key) => {
      if (key === "1") {
        post.value.notSort = "";
        post.value.sort = "";
      } else if (key === "2") {
        post.value.sort = "";
        post.value.notSort = "招商";
      } else if (key === "3") {
        post.value.notSort = "";
        post.value.sort = "招商";
      }
      getPostList();
    };
  
    const getUserInfo = () => {
      userInfo.value = JSON.parse(localStorage.getItem("user"));
    };
  
    const getGoodsList = () => {
      request.post(`/goods/getPart`, goods.value).then((res) => {
        if (res.code == -1) {
          console.log(res.msg);
          isEmpty.value = true;
        } else {
          goodsItem.value = res.data.goodsList;
          isEmpty.value = false;
          isLoading.value = false;
        }
      });
    };
  
    const getPostList = () => {
      request.post(`/post/getPart`, post.value).then((res) => {
        if (res.code == -1) {
          console.log(res.msg);
          isEmpty.value = true;
        } else {
          postItem.value = res.data.postList;
          isEmpty.value = false;
          isLoading.value = false;
        }
      });
    };
  
    const goGoodsDetail = (goodsId) => {
      const routeUrl = router.resolve({
        name: "goodsEditor",
        query: { goodsId },
      });
      window.open(routeUrl.href, "_blank");
    };
  
    const goPostDetail = (postId) => {
      const routeUrl = router.resolve({
        name: "postEditor",
        query: { postId },
      });
      window.open(routeUrl.href, "_blank");
    };
  
    const goToAddPost = () => {
      const postId = "";
      const routeUrl = router.resolve({
        name: "postEditor",
        query: { postId },
      });
      window.open(routeUrl.href, "_blank");
    };
  
    const goToAddGoods = () => {
      const goodsId = "";
      const routeUrl = router.resolve({
        name: "goodsEditor",
        query: { goodsId },
      });
      window.open(routeUrl.href, "_blank");
    };
  
    const getNewUserInfo = () => {
      request.get(`/user/getOne/` + userInfo.value.userId).then((res) => {
        if (res.code == -1) {
          console.log(res.msg);
        } else {
          userInfo.value = res.data;
          localStorage.setItem("user", JSON.stringify(res.data));
        }
      });
    };
  </script>
  
  <template>
    <div class="productBox">
      <el-container>
        <el-aside class="aside">
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              height: 30vh;
            ">
            <img :src="userInfo.image" style="width: 100px; border-radius: 25px" />
            <div style="margin-top: 10px; font-size: 30px">
              {{ userInfo.name }}
            </div>
            <div class="loginOut" @click="loginOut">退出登录</div>
          </div>
  
          <div>
            <div style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
              ">
              <div class="choose" :style="{ color: choose === 1 ? 'white' : '' }" @click="change(1)">
                个人设置
              </div>
              <div class="choose" :style="{ color: choose === 3 ? 'white' : '' }" @click="change(3)">
                商品管理
              </div>
              <div class="choose" :style="{ color: choose === 4 ? 'white' : '' }" @click="change(4)">
                我的帖子
              </div>
            </div>
          </div>
        </el-aside>
  
        <el-main class="main">
          <!-- 个人设置 -->
          <div v-if="choose == 1">
            <el-form :model="userInfo" label-width="120px" style="margin: 50px">
              <el-form-item lable="头像">
                <img :src="userInfo.image"
                  style="width: 120px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;" />
                <el-button v-show="!upload" style="margin-left: 5px;">
                  <el-upload accept="image/jpeg,image/gif,image/png" :file-list="files" :auto-upload='false'
                    :show-file-list="false" :on-change="onChange">
                    选择图片
                  </el-upload>
                </el-button>
                <el-button style="margin-left: 5px;" @click="handleUploadImage" v-show="upload">上传头像
                </el-button>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="userInfo.name" />
              </el-form-item>
              <el-form-item label="角色">
                <el-input v-model="userInfo.role" />
              </el-form-item>
              <el-form-item label="性别">
                <el-input v-model="userInfo.sex" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="userInfo.telephoneNum" />
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="userInfo.account" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="userInfo.password" />
              </el-form-item>
              <el-form-item style="display: flex; justify-content: space-between">
                <el-button type="primary" @click="$noMulClicks(userInfoSubmit, userInfo)">提交</el-button>
                <el-button style="margin-left: 100px">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
  
          <!-- 商品管理 -->
          <div v-if="choose == 3">
            <div>
              <el-affix :offset="0">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                  text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
                  <el-menu-item index="1">全部</el-menu-item>
                  <el-menu-item index="2">文具</el-menu-item>
                  <el-menu-item index="3">衣物</el-menu-item>
                  <el-menu-item index="4">装饰品</el-menu-item>
                  <el-menu-item index="5">纪念品</el-menu-item>
                  <el-menu-item index="6">玩具</el-menu-item>
                  <el-menu-item index="7">家纺</el-menu-item>
                  <el-menu-item index="8">餐具</el-menu-item>
                </el-menu>
              </el-affix>
            </div>
  
            <div v-show="!isEmpty">
              <span v-show="isLoading" style="font-size: large">加载中......</span>
              <div class="list" v-show="goodsItem.length">
                <div class="item" v-for="(goods, index) in goodsItem" @click="goGoodsDetail(goods.goodsId)">
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="goods.cover" class="image" />
                    <div style="padding: 10px">
                      <span style="color: red; font-size: large">￥{{ goods.coverPrice }}</span>
                      <div class="bottom">
                        <span>{{ goods.introduction }}</span>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
            <div class="empty" v-show="isEmpty">
              <el-empty description="暂时没有您想要的商品~~" />
            </div>
  
            <div class="add" @click="goToAddGoods">
              <el-icon :size="60">
                <i-ep-Plus />
              </el-icon>
            </div>
          </div>
  
          <!-- 我的帖子 -->
          <div v-if="choose == 4">
            <el-affix :offset="0">
              <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b" @select="handleSelect1">
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">日常贴</el-menu-item>
                <el-menu-item index="3">招商贴</el-menu-item>
              </el-menu>
            </el-affix>
            <!-- 使用v-show时二次进入乱版 -->
            <div v-if="!isEmpty">
              <span v-show="isLoading" style="font-size: large">加载中......</span>
              <div v-masonry transition-duration="0.3s" item-selector=".item" class="list" v-show="postItem.length">
                <div v-masonry-tile class="item" v-for="(post, index) in postItem" @click="goPostDetail(post.postId)">
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="post.image" class="image" />
                    <div style="padding: 10px">
                      <div class="bottom">
                        <span>{{ post.title }}</span>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
            <div class="empty" v-show="isEmpty">
              <el-empty description="暂时没有您想要的帖子~~" />
            </div>
  
            <div class="add" @click="goToAddPost">
              <el-icon :size="60">
                <i-ep-Plus />
              </el-icon>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <style lang="less" scoped>
    .choose {
      margin-top: 20px;
    }
  
    .choose:hover {
      cursor: pointer;
      color: aliceblue;
    }
  
    .productBox {
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0px;
      background-color: aliceblue;
    }
  
    .aside {
      width: 20vw;
      height: 100vh;
      padding: 30px;
      background-color: coral;
    }
  
    .main {
      width: 80vw;
      height: 100vh;
      overflow: auto !important;
    }
  
    .main::-webkit-scrollbar {
      display: none;
    }
  
    .list {
      display: flex;
      flex-wrap: wrap;
    }
  
    .add {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      text-align: center;
      box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
      position: absolute;
      z-index: 999;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  
    .add:hover {
      color: red;
      cursor: pointer;
    }
  
    .item {
      margin: 10px;
      display: flex;
      flex-direction: column;
      width: calc(100% / 4 - 20px);
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: transform;
      transition-property: transform;
    }
  
    .image {
      width: 100%;
    }
  
    .bottom {
      height: 30px;
      margin-top: 10px;
      line-height: 15px;
      display: -webkit-box;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 12px;
      color: rgb(74, 72, 72);
    }
  
    .goodsItem:hover,
    .goodsItem:focus,
    .goodsItem:active {
      cursor: pointer;
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
    }
  
    .loginOut:hover {
      color: white;
    }
  
    .plus {
      text-align: center;
    }
  
    .plus:hover {
      cursor: pointer;
      color: red;
    }
  </style>